一、講解
什麼是「頁面骨架」？應該是大家的第一個問題，先想像要蓋一間房子，是不是在住進夢想房子前，需要先仔細想想樑柱和房間的區隔，最起碼先定好客廳、廚房、臥室的位置，才再想之後的家具想放甚麼?在哪裡?這個標註樑柱和房間的區隔，就好像是在幫網頁搭建骨架一樣，在網站的世界裡，骨架就是：有一個 標題（比如：網站名稱）、有一個 主要功能區塊（比如：任務清單的地方）、有一個 網站來源資訊處（比如：版權、聯絡資訊等等），目前我對於網站大致位置的想像是，先將網站標題等等放在頂部，在將任務清單區塊等等放在中間，而最底部我希望可以是規劃成放置參考資訊和訊息的地方，暫時先往這個方向去實作。先規劃出空間和構思位置分配，做出出雛形！

為什麼要「拆元件」？一樣想像要蓋一間房子，當沒拆元件時，所有牆、門、窗、電線…全都在一張圖紙上，但在拆元件後，有「門的設計圖」、「窗的設計圖」、「牆的設計圖」，再拼成整棟房子。拆元件有幾項好處，比如：維護，假如遇到要換「窗戶」的樣式，只需要改 Window.vue，不用在密密麻麻的 App.vue 裡找半天；重用，一個 Header.vue，可以拿去其他頁面用。；協作，如果 有3 個人合作專案，就可以一人負責 Header，一人負責 TaskList，一人負責 Footer，不會打架。

二、建立頁面骨架三步驟
Step 1：先在 App.vue 畫出三大區塊
打開專案 → 編輯 src/App.vue
小重點：我們先用語意化標籤 / / 畫好結構，之後 Step 2 再把它們抽出成 Header.vue / TaskList.vue / Footer.vue 三個元件。



Step 2：把三大區塊拆成元件
在 src/components/ 新增三個檔案：
1.Header.vue：放標題 & 副標
2.TaskList.vue：放任務清單區塊（暫時空白）
3.Footer.vue：放版權文字
然後修改 App.vue，並引用這三個元件！

Step 3：啟動伺服器並檢查
打開瀏覽器 → http://localhost:5173/ → 預期畫面：
1.頂部：健康任務追蹤網站（標題）＋副標
2.中間：卡片「任務清單」＋提示文字
3.底部：© 2025 健康習慣追蹤
程式碼圖+最終頁面圖：




結構：main.js → App.vue → Header.vue + TaskList.vue + Footer.vue
現在已經有一個乾淨的 Vue 專案結構，頁面也分出了「頭、身、尾」三個大區塊，雖然目前裡面都還是空的，沒有任務新增或勾選功能，但已經準備好進入下一個階段了！